<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="seachStatus">
                {{$t('sta')}}
                <el-select v-model="selNoteList.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="getNoteList" v-preventReClick>{{$t('qury')}}</el-button>
            <!-- <el-button type="warning" @click="showAddNote">{{$t('add')}}</el-button> -->
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="noteTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="smsContent" :label="$t('smstemp')" width="1087">
                </el-table-column>
                <el-table-column prop="smsType" :label="$t('smschntp')" width="260">
                </el-table-column>
                <el-table-column prop="smsChannelId" :label="$t('smschnl')" width="100">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditNote(scope.row)">{{$t('mdfy')}}</el-link>
                        <!-- <el-link type="primary" @click="showDel(scope.row)">{{$t('dlte')}}</el-link> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selNoteList.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selNoteList.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addsmsForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="addsmsForm" :rules="addsmsRules" :model="addsmsForm" label-width="80px" :hide-required-asterisk="true">
                <!-- <el-form-item :label="$t('smstempid')" prop="id">
                    <el-input v-model="addsmsForm.id" :placeholder="$t('plsipt')"></el-input>
                </el-form-item> -->
                <el-form-item :label="$t('smschnlid')" prop="smsChannelId">
                    <el-input v-model.trim="addsmsForm.smsChannelId" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('smstp')" prop="smsType">
                    <el-input v-model.trim="addsmsForm.smsType" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('smscont')" prop="smsContent">
                    <el-input type="textarea" v-model="addsmsForm.smsContent" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addsmsconForm(addsmsForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editsmsForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="editsmsForm" :rules="editsmsRules" :model="editsmsForm" label-width="80px" :hide-required-asterisk="true">
                <!-- <el-form-item :label="$t('smstempid')" prop="id">
                    <el-input v-model="editsmsForm.id" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('smschnlid')" prop="smsChannelId">
                    <el-input :disabled="true" v-model="editsmsForm.smsChannelId" :placeholder="$t('plsipt')"></el-input>
                </el-form-item> -->
                <el-form-item :label="$t('smstp')" prop="smsType">
                    <el-input v-model.trim="editsmsForm.smsType" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('smscont')" prop="smsContent">
                    <el-input type="textarea" v-model="editsmsForm.smsContent" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editsmsconForm(editsmsForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getsmscontntlist,
    addsmscontnt,
    // deletesmscontnt
    editsmscontnt
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            addDialogVisible: false,
            isOk: false,
            total: 0,
            selNoteList: {
                id: null,
                smsType: null,
                smsContent: null,
                smsChannelId: null,
                status: null,
                sysCreateUid: null,
                sysGmtCreate: null,
                sysModifiesUid: null,
                sysGmtModified: null,
                pageNum: 1,
                pageSize: 10
            },
            addsmsForm: {
                id: null,
                smsType: null,
                smsContent: null,
                smsChannelId: null
            },
            noteTab: [],
            addsmsRules: {
                id: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                smsType: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                smsContent: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                smsChannelId: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            editDialogVisible: false,
            editsmsForm: {
                id: null,
                smsType: null,
                smsContent: null,
                smsChannelId: null
            },
            editsmsRules: {
                id: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                smsType: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                smsContent: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                smsChannelId: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getsmsContList () {
            getsmscontntlist(JSON.stringify(this.selNoteList)).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    this.noteTab = res.data.data.list
                    this.noteTab.forEach(item => {
                        if (item.status === 'VALID') item.status = this.$t('vlid')
                        if (item.status === 'INVALID') item.status = this.$t('invlid')
                    })
                }
            })
        },
        getNoteList () {
            this.selNoteList.pageNum = 1
            this.getsmsContList()
        },
        addDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        showAddNote () {
            this.addDialogVisible = true
        },
        addsmsconForm () {
            this.addsmsForm.smsContent = this.addsmsForm.smsContent.trim()
            addsmscontnt(this.addsmsForm).then(res => {})
        },
        showEditNote (data) {
            this.editsmsForm.id = data.id
            this.editsmsForm.smsChannelId = data.smsChannelId
            this.editsmsForm.smsContent = data.smsContent
            this.editsmsForm.smsType = data.smsType
            this.editDialogVisible = true
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        editsmsconForm (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.editsmsForm.smsContent = this.editsmsForm.smsContent.trim()
                editsmscontnt(JSON.stringify(this.editsmsForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                        this.getsmsContList()
                        this.editDialogVisible = false
                    }
                })
            })
        },
        showDel () {},
        handleSizeChange (newSize) {
            this.selNoteList.pageSize = newSize
            this.getsmsContList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selNoteList.pageNum = newNum
            this.getsmsContList()
        }
    },
    mounted () {
        this.getsmsContList()
    }
}
</script>

<style lang="less" scoped>
@import './noteMgr.less';
</style>
